<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型管理</title>
    <link rel="stylesheet" href="/scriptZIP/element-ui.index.min.css">
    <style scoped>
        .item_box {
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            width: 90%;
        }

        .item_box_item {
            width: 23%;
        }

        .item_box_item_box {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .add {
            width: 60%;
            padding: 6px 0;
            border-radius: 6px;
            text-align: center;
            color: white;
            margin-top: 10px;
            background-color: #409eff;
        }

        .form {
            width: 30%;
            padding: 10px 0;
            border-radius: 6px;
            text-align: center;
            margin: 40px auto 0 auto;
            color: white;
            text-align: center;
            background-color: #409eff;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="shuju" v-cloak>
        <div class="item_box">
            <div class="item_box_item">
                <div>数据来源:</div>
                <div class="item_box_item_box" v-for="(item,i) in form.dataSource">
                    <div><el-input v-model="item.value" size="small" placeholder="请输入"></el-input></div>
                    <div style="margin-left: 10px;" v-if="i!=0"><el-button type="primary" size="mini" v-show="able.del"
                            @click="removeDomain(item,1)">删除</el-button></div>
                </div>
                <div class="add" @click="addDomain(1)">添加</div>
            </div>
            <div class="item_box_item">
                <div>数据状态:</div>
                <div class="item_box_item_box" v-for="(item,i) in form.dataStatus">
                    <div><el-input v-model="item.value" size="small" placeholder="请输入"></el-input></div>
                    <div style="margin-left: 10px;" v-if="i!=0"><el-button type="primary" size="mini" v-show="able.del"
                            @click="removeDomain(item,2)">删除</el-button></div>
                </div>
                <div class="add" @click="addDomain(2)">添加</div>
            </div>
            <div class="item_box_item">
                <div>数据意向:</div>
                <div class="item_box_item_box" v-for="(item,i) in form.dataIntent">
                    <div><el-input v-model="item.value" size="small" placeholder="请输入"></el-input></div>
                    <div style="margin-left: 10px;" v-if="i!=0"><el-button type="primary" size="mini" v-show="able.del"
                            @click="removeDomain(item,3)">删除</el-button></div>
                </div>
                <div class="add" @click="addDomain(3)">添加</div>
            </div>
            <div class="item_box_item">
                <div>未报读理由:</div>
                <div class="item_box_item_box" v-for="(item,i) in form.followReason">
                    <div><el-input v-model="item.value" size="small" placeholder="请输入"></el-input></div>
                    <div style="margin-left: 10px;" v-if="i!=0"><el-button type="primary" size="mini" v-show="able.del"
                            @click="removeDomain(item,4)">删除</el-button></div>
                </div>
                <div class="add" @click="addDomain(4)">添加</div>
            </div>
        </div>
        <div class="form" @click="submit()" v-if="!form2.id">
            创建
        </div>
        <div class="form" @click="upsubmit()" v-if="form2.id">
           <span>修改</span> 
        </div>
    </div>
    </div>
    <script src="/scriptZIP/qs.min.js"></script>
    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/scriptZIP/elementui.index.min.js"></script>
    <script src="/scriptZIP/dayjs.min.js"></script>
    	<script src="/js/auth_util.js"></script>
        <script src="/js/list.js"></script>

        
    <script>
        new Vue({
            el: '#shuju',
            data() {
                return {
                    form: {
                        dataSource: [{
                            value: ''
                        }],
                        dataStatus: [{
                            value: ''
                        }],
                        dataIntent: [{
                            value: ''
                        }],
                        followReason: [{
                            value: ''
                        }],
                    },
                    form2: {
                        id: '',
                        dataSource: [],
                        dataStatus: [],
                        dataIntent: [],
                        followReason: [],
                        agentId: top_params().id
                    },
                    o: {
                        add: true,
                        edit: true,
                        del: true,
                        import: true,
                        export: true,
                        enter: true,
                        audit: true,
                    },
                };
            },
            created: function () {
                abled('dataType', this);
                axios.get('/pc/user').then(function (res) {
                    var num = 128
                    var binary=''
                    var arr=[]
                    if (num) {
                        binary=(num).toString(2).padStart(8, '0');//转为8位数二进制
                        arr=binary.split('').map(bit => bit === '1');//把二进制中1转为true，0转为false
                        this.o.add= arr[1]
                        this.o.edit= arr[2]
                        this.o.del= arr[3]
                        this.o.import=arr[4]
                        this.o.export= arr[5]
                        this.o.enter=arr[6]
                        this.o.audit= arr[7]
                    }
                }.bind(this));
                this.getcategory()
               
            },
            methods: {
                getcategory() {
                    axios.get('/pc/category/' + top_params().id).then(function (res) {
                        if(!res.data) return;
                        this.form.dataSource = []
                        this.form.dataStatus = []
                        this.form.dataIntent = []
                        this.form.followReason = []
                        this.form2 = res.data
                        for (const key in res.data) {
                            if (key != 'agentId' && key != 'id') {
                                for (let i = 0; i < res.data[key].length; i++) {
                                    if (key == 'dataSource') {
                                        this.form.dataSource.push({ value: res.data[key][i] })
                                    } else if (key == 'dataStatus') {
                                        this.form.dataStatus.push({ value: res.data[key][i] })
                                    } else if (key == 'dataIntent') {
                                        this.form.dataIntent.push({ value: res.data[key][i] })
                                    } else if (key == 'followReason') {
                                        this.form.followReason.push({ value: res.data[key][i] })
                                    }
                                }
                            }

                        }
                        // console.log(this.form,'this.form');
                    }.bind(this));
                },
                //移除
                removeDomain(item, key) {

                    if (index !== -1) {
                        if (key == 1) {
                            var index = this.form.dataSource.indexOf(item)
                            this.form.dataSource.splice(index, 1)
                        } else if (key == 2) {
                            var index = this.form.dataStatus.indexOf(item)
                            this.form.dataStatus.splice(index, 1)
                        } else if (key == 3) {
                            var index = this.form.dataIntent.indexOf(item)
                            this.form.dataIntent.splice(index, 1)
                        } else if (key == 4) {
                            var index = this.form.followReason.indexOf(item)
                            this.form.followReason.splice(index, 1)
                        }
                    }
                },
                //添加
                addDomain(key) {
                    if (key == 1) {
                        this.form.dataSource.push({
                            value: ''
                        });
                    } else if (key == 2) {
                        this.form.dataStatus.push({
                            value: ''
                        });
                    } else if (key == 3) {
                        this.form.dataIntent.push({
                            value: ''
                        });
                    } else if (key == 4) {
                        this.form.followReason.push({
                            value: ''
                        });
                    }
                },
                //创建
                submit() {
                    this.form2.dataSource = [];
                    this.form2.dataStatus = [];
                    this.form2.dataIntent = [];
                    this.form2.followReason = [];
                    for (const key in this.form) {
                        // console.log(this.form[key], key, 'aaa');
                        for (let i = 0; i < this.form[key].length; i++) {
                            if (!this.form[key][i].value) return alert('请检查是否填写完整')
                            if (key == 'dataSource') {
                                this.form2.dataSource.push(this.form[key][i].value)
                            } else if (key == 'dataStatus') {
                                this.form2.dataStatus.push(this.form[key][i].value)
                            } else if (key == 'dataIntent') {
                                this.form2.dataIntent.push(this.form[key][i].value)
                            } else if (key == 'followReason') {
                                this.form2.followReason.push(this.form[key][i].value)
                            }
                        }
                    }
                    axios.post('/pc/category', this.form2).then(function (res) {
                        alert('添加成功')
                        this.getcategory()
                    }.bind(this));
                    // console.log(this.form2, 'form2');
                },
                //修改
                upsubmit() {
                    this.form2.dataSource = [];
                    this.form2.dataStatus = [];
                    this.form2.dataIntent = [];
                    this.form2.followReason = [];
                    for (const key in this.form) {
                        // console.log(this.form[key], key, 'aaa');
                        for (let i = 0; i < this.form[key].length; i++) {
                            if (!this.form[key][i].value) return alert('请检查是否填写完整')
                            if (key == 'dataSource') {
                                this.form2.dataSource.push(this.form[key][i].value)
                            } else if (key == 'dataStatus') {
                                this.form2.dataStatus.push(this.form[key][i].value)
                            } else if (key == 'dataIntent') {
                                this.form2.dataIntent.push(this.form[key][i].value)
                            } else if (key == 'followReason') {
                                this.form2.followReason.push(this.form[key][i].value)
                            }
                        }
                    }
                    axios.put('/pc/category', this.form2).then(function (res) {
                        alert('修改成功')
                        this.getcategory()
                    }.bind(this));
                }
            }
        });
    </script>
</body>

</html>